<template>
	<view class="content">
		<view class="wrap">
			<u-swiper :height="350" :interval="5000" :duration="1000" :list="list"></u-swiper>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14" width="500rpx" height="200px">
			<view class="u-p-b-30 u-p-t-80 u-p-l-30">
				<view class="u-text-left u-font-xl">
					客服在线时间：
				</view>
				<view class="u-text-center u-p-t-20 u-font-md">
					8:00-12:00 14:00-18:00
				</view>
				<view class="u-p-t-30"></view>
				<view class="u-text-left u-font-xl">
					客服联系方式：
				</view>
				<view class="u-text-center u-p-t-20 u-font-md">
					0859-123456
				</view>
			</view>
		</u-popup>
		<view class="u-p-t-30">
			<u-grid :col="4" @click="GridIndex">
					<u-grid-item index="1">
						<image class="nav_img" src="../../static/icon/kf.png"></image>
						<view class="grid-text">联系客服</view>
					</u-grid-item>
					<u-grid-item index="2">
						<image class="nav_img" src="../../static/icon/scxx.png"></image>
						<view class="grid-text">便民服务</view>
					</u-grid-item>
					<u-grid-item index="3">
						<image class="nav_img" src="../../static/icon/jf.png"></image>
						<view class="grid-text">生活缴费</view>
					</u-grid-item>
					<u-grid-item index="4">
						<image class="nav_img" src="../../static/icon/bx.png"></image>
						<view class="grid-text">故障报修</view>
					</u-grid-item>
				</u-grid>
		</view>
		<view class="newNotice" @click="gitNotiuce">
			<view class="newNoticeLeft">
				<view class="newIcon">
					<image src="../../static/images/ico_01.png" mode="scaleToFill" style="width: 100%; height: 100%;" />
				</view>
				<view class="NewTitle">最新通知</view>
				<view class="New_block"></view>
				<!-- <view class="NewMsg" v-if="listData.msg">{{listData.msg.substring(0,18)}}</view> -->
			</view>
			<view class="newNoticeRight">
				<image src="../../static/images/btn_12.png" mode="scaleToFill" style="width: 100%; height: 100%;"></image>
			</view>
			<!-- <view v-if="listData.has_new == 1" class="dian">.</view> -->
		</view>
		<view class="news_content">
			<view class="title_left">
				<view class="color_block"></view>
				<view class="text">最新资讯</view>
			</view>
		</view>
		
		<scroll-view scroll-y="true" style="height: 100%;">
			<view v-for="i in 4">
			<view class="news_list">
				<view class="list_box" >
					<image style="width: 200rpx; height: 140rpx; border-radius: 6rpx;" src="http://oa.yszyun.cn:9111/uploads/20210326/eda9b4f2fedc110ecfdf492baef78921.jpg" mode="scaleToFill" lazy-load v-if="true" />
					<image style="width: 200rpx; height: 140rpx; border-radius: 6rpx; z-index: 999;" src="../../static/images/noImg.png" v-if="false" mode="scaleToFill" lazy-load></image>
					<view class="box_detail">
						<view class="title">智慧社区建设——缔造美好建筑空间</view>
						<view class="detail">
							<image src="../../static/images/btn_07_time.png" style="width: 36rpx; height: 36rpx;margin-left: -10rpx;" mode="scaleToFill" />
							<view class="detail_text">2021-02-07 19:45:30</view>
							<image src="../../static/images/btn_06_view.png" style="width: 36rpx; height: 36rpx; margin-left: 34rpx; margin-right: 5rpx;" mode="scaleToFill" />
							<view class="detail_text">999</view>
						</view>
					</view>
				</view>
			</view>
			</view>
		</scroll-view>
		<view>
			<u-divider  half-width="200" border-color="#6d6d6d">没有更多内容了</u-divider>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				newslist: [], //新闻列表
				list: [{
						image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgwcs3.soufunimg.com%2Fnews%2F2019_04%2F17%2F526826a9-c8ac-41dc-a265-f053784844fe.png&refer=http%3A%2F%2Fimgwcs3.soufunimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632747691&t=3ee545df52c3f28fc7220e5a01256c62',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhouse.mnw.cn%2Fuserfiles%2Fimage%2F20190901%2F01183331b03c1cfaf87155.png&refer=http%3A%2F%2Fhouse.mnw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632747691&t=388783c3d7aa77bfe7f0acfb25ecf7c1',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.cn.made-in-china.com%2Fcnimg%2Fprod_bddcc84da27f%2F0%2F%E7%89%A9%E4%B8%9A%E7%AE%A1%E7%90%86%E6%9C%8D%E5%8A%A1%E7%A4%BC%E4%BB%AA%E5%9F%B9%E8%AE%AD_800x800.jpg&refer=http%3A%2F%2Fimage.cn.made-in-china.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632747691&t=e504f6fb03dd47260450631b49456fd4',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		onLoad() {
			
		},
		methods: {
		//点击四个小图标跳转到对应的页面
		GridIndex(index){
			if(index == 1){
				console.log("客服服务");
				this.show = true
			}else if(index == 2){
				console.log("便民服务");
			}else if(index == 3){
				//1先判断用户是否登录
				//2获取用户信息
				//3跳转到缴费页面
				console.log("生活缴费");
					this.$u.route({
						type: 'navigateTo',
						url: '/pages/Paycost/Paycost'
					})
				
			}else{
				console.log("故障报修");
				this.$u.route({
					type: 'navigateTo',
					url: '/pages/repair/repair'
				})
			}
		},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
	}
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	
	.news_list {
		width: 95%;
		margin: 0 auto;
		margin-top: 34rpx;
	}
	.list_box {
		display: flex;
		border-bottom: 1px solid #e6e6e6;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		.box_detail {
			margin-left: 36rpx;
			.title {
				width: 472rpx;
				height: 80rpx;
				font-size: 30rpx;
				color: #323232;
				line-height: 40rpx;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient:vertical;
				overflow: hidden;
				word-break:break-all;
			}
			.detail {
				display: flex;
				margin-top: 30rpx;
				align-items: center;
				.detail_text {
					font-size: 24rpx;
					color: #b3b3b3;
				}
			}
			.detail_source{
				margin-top: 15rpx;
				font-size: 22rpx;
				color: #b3b3b3;
			}
		}
	}
	
	
	
	
	.newNotice {
		width: 93%;
		margin: 0 auto;
		height: 80rpx;
		background-color: #f5faf8;
		border-radius: 8rpx;
		// margin-top: 220rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// position: relative;
	
		.newNoticeLeft {
			margin-left: 20rpx;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 26rpx;
	
			.newIcon {
				width: 48rpx;
				height: 48rpx;
			}
	
			.NewTitle {
				color: #323232;
				margin-left: 14rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
			}
	
			.NewMsg {
				color: #808080;
				font-size: 26rpx;
				margin-left: 20rpx;
			}
			.New_block {
				width: 1rpx;
				height: 26rpx;
				background-color: #808080;
				border-radius: 1rpx;
			}
		}
	
		.newNoticeRight {
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
			// background-color: #007AFF;
		}
	
		.dian {
			color: red;
			position: absolute;
			right: 60rpx;
			top: 14rpx;
			z-index: 999;
		}
	}
	
	.news_content {
		width: 93%;
		margin: 0 auto;
		// border-top: 1px solid #e6e6e6;
		margin-top: 46rpx;
		display: flex;
		justify-content: space-between;
	
		// padding-top: 34rpx;
		.title_left {
			display: flex;
			align-items: center;
	
			.color_block {
				width: 8rpx;
				height: 30rpx;
				background-color: #2979FF;
				border-radius: 4rpx;
				margin-right: 16rpx;
			}
	
			.text {
				font-size: 32rpx;
				color: #272727;
			}
		}
	
		.title_right {
			display: flex;
			justify-content: center;
			align-items: center;
	
			.right_text {
				color: #b3b3b3;
				font-size: 24rpx;
				margin-right: 7rpx;
			}
		}
	}
	
	.nav_img{
		margin: 0 auto;
		width: 44px;
		height: 44px;
	}
	
</style>